<!--
@Descripttion 文本域
@version 1.0.0
@Author Bell
@ 使用
  引入组件
    import FTextarea from '@/components/form/f-textarea'
  注册组件
    components: {
      FTextarea
    }
  使用
    <FTextarea v-model.trim="xxx" />
    <FTextarea v-model.trim="xxx" :maxlength="100" width="220px" minRows="3" :disabled="false" placeholder="请输入" resize="vertical" :autofocus="false" />
    maxlength   Number  默认值(100)       可输入长度
    width       String  默认值(220px)     文本框宽度
    minRows     String  默认值(3)         文本框最低行数
    disabled    Boolean 默认值(false)     是否失效
    placeholder String  默认值(请输入)     默认占位文本
    resize      String  默认值(vertical)  是否缩放 推荐可选值none(不允许)|vertical(垂直)  不推荐可选值both(整体)|horizontal(水平)
    autofocus   Boolean 默认值(false)     是否默认聚焦
 -->
<template>
  <el-input
    type="textarea"
    :value="value"
    @input="changeVal"
    show-word-limit
    :maxlength="maxlength"
    :autosize="{ minRows: minRows }"
    :style="`width: ${width}`"
    :disabled="disabled"
    :placeholder="placeholder"
    :resize="resize"
    :autofocus="autofocus"
  >
  </el-input>
</template>

<script>
export default {
  name: 'f-textarea',
  props: {
    value: {
      required: true
    },
    // 可输入长度
    maxlength: {
      type: Number,
      default: 100
    },
    // 文本框宽度
    width: {
      type: String,
      default: '220px'
    },
    // 文本框最低行数
    minRows: {
      type: String,
      default: '3'
    },
    // 是否失效
    disabled: {
      type: Boolean,
      default: false
    },
    // 默认占位文本
    placeholder: {
      type: String,
      default() {
        return this.$t('placeholder.Please enter')
      }
    },
    // 是否缩放 推荐可选值none(不允许)|vertical(垂直)  不推荐可选值both(整体)|horizontal(水平)
    resize: {
      type: String,
      default: 'vertical'
    },
    // 是否默认聚焦
    autofocus: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    changeVal(value) {
      this.$emit('input', value)
    }
  }
}
</script>
<style lang="less" scoped>
  .el-textarea /deep/.el-input__count{
    line-height: 1em;
  }
</style>
